<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联事件既要传入事件对象,也要传入自定义参数</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <ul>
            <!-- 如果既要传入自定义参数,又要传入事件对象,事件对象实参名必须为$event -->
            <li @click="handleClick(1,2,$event,3)">123</li>
            <!-- 注意,如果是匿名函数,传入参数时,事件对象名为匿名函数的参数 -->
            <li @click="(e)=>handleClick(1,2,e,3)">222</li>
        </ul>
        <!-- .shop  阻止冒泡 相当于stopPropagation -->
        <p @click.stop="(e)=>handleClick(1,2,e,3)">222</p>
        <!-- .prevent  阻止默认行为-->
        <form action="" @submit.prevent=""></form>
        <!-- .self 只有当事件源是自己的时候才会触发,不会受到子元素冒泡影响 -->
        <ul @click.self="">
            <li></li>
        </ul>
        <!-- .once 只执行一次,执行一次之后就相当于解绑了 -->
        <button @click.once="console.log('once');">抽奖</button>
        <!-- .passive修饰符一般用于触摸事件的监听器,可以用来改善移动端设备的滚屏性能  (touchstart事件)
            注意: .passive会想浏览器表明了你不想阻止默认事件的默认行为, 如果你已经这么做了,则.prevent会被忽略,并且浏览器会抛出警告
        -->
        <input type="text" name="" id="" @keyup.enter="console.log('enter键抬起触发');">
        <!-- .enter 
            .tab 
            .delete(同时捕获Del键和Backspace键)
            .esc
            .space
            .up
            .down
            .left
            .right
         -->
    </div>
    <script>
        let obj = {
            methods: {
                handleClick(a,b,c,e){
                    console.log(a,b,c,e);
                }
            },
        }
        Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>